//微信--测试会员
import React from 'react';
import { Transfer, Form, Input, Button } from 'antd';
const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    keyWord: '',
  });
}
const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

class WeiXinTestVIP extends React.Component {
  state = {
    targetKeys: oriTargetKeys,
    selectedKeys: [],
  };
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });

    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });

    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  };
  formChange = val => {
    this.setState({
      keyWord: val,
    });
  };
  /* 筛选 */
  search = () => {};
  render() {
    const { targetKeys, selectedKeys } = this.state;
    return (
      <>
        <Form style={{ display: 'flex', justifyContent: 'center' }}>
          <Form.Item label="关键字" name="keyWord">
            <Input
              placeholder="请输入会员名称关键字"
              onChange={e => this.formChange(e.target.value)}
            ></Input>
          </Form.Item>
          <Button type="primary" onClick={this.search}>
            搜索
          </Button>
        </Form>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Transfer
            dataSource={mockData}
            titles={['会员列表', '测试会员']}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleChange}
            onSelectChange={this.handleSelectChange}
            render={item => item.title}
            style={{ marginBottom: 16 }}
            listStyle={{ width: '300px', height: '500px', color: 'white' }}
          />
        </div>
      </>
    );
  }
}

export default WeiXinTestVIP;
